<template>
  <div class="pagebox">
    <div class="pagebox-search">
      <el-form :inline="true" class="fr" size="mini">
        <el-form-item>
          <el-button type="primary" @click="add">新建</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pagebox-content">
      <el-table border :data="tableData" size="mini" v-loading="!ableToLoad" stripe>
        <el-table-column type="index" width="60" fixed></el-table-column>
        <el-table-column prop="username" label="用户名" show-overflow-tooltip> </el-table-column>
        <el-table-column label="头像" show-overflow-tooltip>
          <template slot-scope="scope">
            <img :src="scope.row.avatar" height="30" />
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" show-overflow-tooltip> </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createdAt }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template slot-scope="scope">
            {{ scope.row.updatedAt }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click.native.prevent="update(scope.row)" type="primary" size="mini">编辑</el-button>
            <el-button @click.native.prevent="del(scope.row)" type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <user-update :showAddUpdate.sync="showAddUpdate" :selectData.sync="selectData" v-if="showAddUpdate" @close="close">
    </user-update>
  </div>
</template>

<script>
import userUpdate from '@/components/userCom/index'
import userApi from '@/api/user'
export default {
  name: 'user',
  data() {
    return {
      pageheight: null,
      tableData: [],
      ableToLoad: true,
      showAddUpdate: false,
      selectData: {}
    }
  },
  components: {
    'user-update': userUpdate
  },
  methods: {
    close(val) {
      if (val) {
        this.getList()
      }
      this.selectData = {}
      this.showAddUpdate = false
    },
    add() {
      this.showAddUpdate = true
    },
    update(row) {
      console.log(this.showAddUpdate)
      console.log(row)
      
      this.showAddUpdate = true
      this.selectData = row
      console.log(this.showAddUpdate)
    },
    del(item) {
      this.$confirm('确定删除吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.delHandler(item)
        })
        .catch(() => {})
    },
    async delHandler(item) {
      userApi.delete(item.id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.getList()
    },
    async getList() {
      if (!this.ableToLoad) return
      this.ableToLoad = false
      const res = await userApi.userList({
        author: 'admin'
      })
      console.log(res)
      this.ableToLoad = true
      this.tableData = res
    }
  },
  created() {
    this.getList()
  },
  mounted() {}
}
</script>

<style lang="scss" scoped></style>
